import { formatMoneyValue } from '@/utils';
import type { IColumnsOption } from 'vc';

export function useTable(originData, isTraceSource) {
  const columns = ref<IColumnsOption[]>([]);
  const tableData = ref<any[]>([]);

  function resetTableData() {
    tableData.value = [];
    columns.value = [];

    columns.value.push(
      {
        title: '指标',
        fixed: 'left',
        width: 200,
        className: ({ row }) => {
          return row.level === 1 ? 'levelFirst' : '';
        },
        slots: {
          default: ({ row }) => {
            const _name = row.name;
            // 第一层大标题
            if (row.level === 1) {
              return (
                <>
                  <div class="title">{_name}</div>
                </>
              );
            }
            // 小标题
            else if (row.level === 2) {
              return <div class="sub-title">{_name}</div>;
            }
            return <span onClick={() => toDetail(row)}>{_name}</span>;
          }
        }
      },
      {
        title: '单位',
        align: 'right',
        field: 'unit'
      }
    );

    originData?.value?.years.forEach((item) => {
      columns.value.push({
        title: item + '年',
        align: 'right',
        minWidth: 100,
        slots: {
          default({ row }) {
            if ([1, 2].includes(row?.level)) {
              return '';
            }

            const data = row?.values?.filter((subItem) => {
              return subItem.year === item;
            });

            const _data = data?.[0];
            const _dataValue = _data?.value;
            const _value = _dataValue ? formatMoneyValue(_dataValue) : '-';
            const showJump = _dataValue && ((isTraceSource.value && _data?.fileUrl) || _data?.calcIndicatorRemark || _data?.contentDescription);
            const hasRemark = _dataValue && (_data?.calcIndicatorRemark || _data?.contentDescription);

            return (
              <div class={[{ sourceLink: isTraceSource.value && _dataValue && _data?.fileUrl }, { hasRemark: hasRemark }]}>
                {showJump ? <span onClick={() => goSource(_data)}>{_value}</span> : <span>{_value}</span>}
              </div>
            );
          }
        }
      });
    });

    // 整理table 所需数据格式
    originData?.value?.details?.forEach((mainItem, index) => {
      tableData.value.push({
        name: mainItem.classificationLevel3,
        unit: ' ',
        level: 1,
        sort: index
      });
      mainItem.thirdClassificationDetails?.forEach((subItem) => {
        tableData.value.push(subItem);
      });
    });
  }

  watch(
    [() => originData?.value?.years, () => originData?.value?.details],
    () => {
      resetTableData();
    },
    {
      deep: true,
      immediate: true
    }
  );

  // 溯源弹窗
  const showActionsheet = ref(false);
  // 溯源弹窗数据
  const actionData = ref<Record<string, any>>();

  // 溯源弹窗打开
  function goSource(item) {
    actionData.value = item;
    showActionsheet.value = true;
  }

  // 详情时间轴是否显示
const timeDetailShow =  ref(false);
// 当前点击的指标列
const currentDetail = ref();
const currentDetailName = ref();
// 点击左侧列 查看详情图表
function toDetail(item) {
  if (item?.historicalTrend && item?.values?.length) {
    currentDetailName.value = item.name;
    timeDetailShow.value = true;
    currentDetail.value = item;
  }
}

  return {
    columns,
    tableData,
    showActionsheet,
    actionData,
    timeDetailShow,
    currentDetail,
    currentDetailName
  };
}
